<template>
  <div class="charts" ref="charts"></div>
</template>

<script>
import echarts from "echarts";
export default {
  name: "LineChart",
  mounted() {
    const lineChart = echarts.init(this.$refs.charts);
    //配置数据
    lineChart.setOption({
      xAxis: {
        show: false,
        min:0,//最小值
        max:100//最大值
      },
      yAxis: {
        show: false,
         type: "category",
      },
      series: [
        {
          type: "bar",
          data: [ 78],
          color:'yellowgreen',
          barWidth:20,
          //背景颜色
          showBackground:true,
          backgroundStyle:{
            color:'#eee'
          },
          label:{
          show:true,
          formatter:'|',
          position:'right'
        }
        
        },
        
      ],
      //布局
      grid: {
        left: 0,
        top: 0,
        right: 0,
        bottom: 0,
      },
     
    });
  },
};
</script>

<style scoped>
.charts {
  width: 100%;
  height: 100%;
}
</style>
